<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        办公物资台账列表
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>资产编号</label>
                                    <input type="text" name="matCode" class="form-control" placeholder="请输入资产编号或名称">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>材质</label>
                                    <input type="text" name="matType" class="form-control" placeholder="请输入材质">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>品级</label>
                                    <input type="text" name="matLevel" class="form-control" placeholder="请输入品级">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>具体位置</label>
                                    <input type="text" name="matSpeLoc" class="form-control" placeholder="请输入具体位置">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>使用部门</label>
                                    <input type="text" name="matDepart" class="form-control" placeholder="请输入使用部门">
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-top: 5px;">
                                    <label>使用状态</label>
                                    <input type="text" name="matStatus" class="form-control" placeholder="请输入使用状态">
                                </div>

                                <button type="button" class="btn btn-success" id="btn-search" style="margin-top: 5px;">
                                    <!--<i class="fa fa-search"></i>-->
                                    <span class="Bold">搜索</span>
                                </button>


                            </div>
                        </div>
                        <div class="row form-inline"  id="toolbar">

                            <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="uploadFile()" style="margin-top: 5px;" shiro:hasPermission="drive:officematsb:add">
                                <!--<i class="fa fa-plus"></i>-->
                                <span class="Bold">上传</span>
                            </a>

                            <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="addType()" style="margin-right: 10px;margin-top: 5px;" shiro:hasPermission="drive:officematsb:add">
                                <!--<i class="fa fa-plus"></i>-->
                                <span class="Bold">添加</span>
                            </a>
                        </div>
                    </form>
                </div>
                <div class="box-body"  style=" overflow: auto;">
                    <table id="bootstrap-table" style="table-layout: fixed;word-break:break-all; word-wrap:break-word;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--创建类型模态框-->
<div class="modal fade" id="modal-create-type">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增办公物资台账信息</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-create" class="form-horizontal">
                    <div class="col-md-12" style="padding-top: 15px;">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">排序</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="matSortNum" autocomplete="off" placeholder="排序">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">物资名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matName" autocomplete="off" placeholder="物资名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">资产编号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matCode" autocomplete="off" placeholder="资产编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">尺寸</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matSize" autocomplete="off" placeholder="尺寸">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">材质</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matType" autocomplete="off" placeholder="材质">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">品级</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matLevel" autocomplete="off" placeholder="品级">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">具体位置</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matSpeLoc" autocomplete="off" placeholder="具体位置">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用部门</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matDepart" autocomplete="off" placeholder="使用部门">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">来源</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matSource" autocomplete="off" placeholder="来源">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">责任人</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matPerson" autocomplete="off" placeholder="责任人">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用状态</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matStatus" autocomplete="off" placeholder="使用状态">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">关键信息</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matInfo" autocomplete="off" placeholder="关键信息">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matRemark" autocomplete="off" placeholder="备注">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--编辑类型模态框-->
<div class="modal fade" id="modal-edit-type">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑办公物资台账信息</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-edit" class="form-horizontal">
                    <div class="col-md-12" style="padding-top: 15px;">
                        <input type="hidden" name="matId"/>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">排序</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="matSortNum" autocomplete="off" placeholder="排序">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">物资名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matName" autocomplete="off" placeholder="物资名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">资产编号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matCode" autocomplete="off" placeholder="资产编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">尺寸</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matSize" autocomplete="off" placeholder="尺寸">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">材质</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matType" autocomplete="off" placeholder="材质">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">品级</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matLevel" autocomplete="off" placeholder="品级">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">具体位置</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matSpeLoc" autocomplete="off" placeholder="具体位置">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用部门</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matDepart" autocomplete="off" placeholder="使用部门">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">来源</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matSource" autocomplete="off" placeholder="来源">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">责任人</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matPerson" autocomplete="off" placeholder="责任人">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">使用状态</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matStatus" autocomplete="off" placeholder="使用状态">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">关键信息</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matInfo" autocomplete="off" placeholder="关键信息">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="matRemark" autocomplete="off" placeholder="备注">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--导入模态框-->
<div class="modal fade" id="modal-import">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>模版</label>
                        <a th:href="@{/file/办公物资汇总台账模板.xlsx}">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>上次导入错误数据</label>
                        <a id="download-error"
                           th:data-url="@{/files/{user}/OffMaterError.xls(user=${session.user.account})}"
                           href="javascript:void(0);">点击下载</a>
                    </div>

                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input class="btn" type="file" multiple="multiple" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>
                    </div>

                    <!--<div class="form-group">-->
                        <!--<label for="browsefile">视频地址</label>-->
                        <!--<input type='file' id='browsefile' style="display: none" onchange='filepath.value=this.value'>-->
                        <!--<input type='textfield' id="filepath" disabled="disabled" style="background-color: #EEEEEE; border: solid 1px #d2d6de; line-height: 30px; height: 30px;" >-->
                        <!--<input type='button' id='filebutton' value='浏览这里随便写名字' onclick="browsefile.click()"  disabled="disabled" style="color: #737373;">-->
                    <!--</div>-->


                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-upload" type="button" class="btn btn-success">
                    <span class="Bold">上传</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>

<script th:inline="javascript">

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-create-type", function () {
        js.validate.reset("typeForm-create");
        js.reset("typeForm-create");
    });

    /** 导入表单验证 */
    js.validate.init("typeForm-create", {
        fields: {
            matCode: {validators: {notEmpty: {message: '请输入资产编号'},
                    remote: {
                        url: ctx + "tool/offMater/checkUnique",
                        message: '资产编号已存在',
                        delay: 200,
                        type: 'POST',
                        data: {
                            matId: function () {
                                return  "";
                            }
                        }
                    }}},
            matName:{validators: {notEmpty: {message: '请输入物资名称'}}}
        }
    });

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-edit-type", function () {
        js.validate.reset("typeForm-edit");
        js.reset("typeForm-edit");
    });

    /** 导入表单验证 */
    js.validate.init("typeForm-edit", {
        fields: {
            matCode: {validators: {notEmpty: {message: '请输入资产编号'},
                    remote: {
                        url: ctx + "tool/offMater/checkUnique",
                        message: '资产编号已存在',
                        delay: 200,
                        type: 'POST',
                        data: {
                            matId: function () {
                                return  $("#typeForm-edit input[name='matId']").val();
                            }
                        }
                    }}},
            matName:{validators: {notEmpty: {message: '请输入物资名称'}}}
        }
    });

    /*
    *上传文件
     */
    function uploadFile(){
        js.modal.open("modal-import");
    }
    /** 导入表单验证 */
    js.validate.init("importForm", {
        fields: {
            file: {
                validators: {
                    notEmpty: {message: '上传文件不能为空'},
                    file: {extension: 'xls,xlsx', message: '请选择excel文件'}
                }
            }
        }
    });

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-import", function () {
        js.validate.reset("importForm");
        js.reset("importForm");
    });

    /*
    *添加类型
     */
    function addType(){
        js.modal.open("modal-create-type");
    }
    /** 导入设备台账信息 */
    $("#btn-upload").click(function () {
        var $this = $(this);
        $this.attr('disabled', true);
        js.validSubmit({
            formId: "importForm",
            url: ctx + "tool/offMater/import",
            data: new FormData($("#importForm")[0]),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.alert(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-import");
                    $this.attr('disabled', false);
                }
            }
        });
    });
    /** 创建类型 */
    $("#btn-create-type").click(function () {
        if (js.validate.isValid("typeForm-create")) {
            js.post({
                url: ctx + "tool/offMater/add",
                data: $("#typeForm-create").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-create-type");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        }
    });

    /** 创建类型 */
    $("#btn-edit-type").click(function () {
        if (js.validate.isValid("typeForm-edit")) {
            js.post({
                url: ctx + "tool/offMater/edit",
                data: $("#typeForm-edit").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-edit-type");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        }
    });

    /*
    *编辑类型
     */
    function editType(row){
        $("#typeForm-edit").fillData(row);

        js.modal.open("modal-edit-type");
    }
    /*
    *删除类型
     */
    function delType(id){
        js.confirmPost({
            content: "删除数据将无法恢复，确认删除吗？",
            url: ctx + "tool/offMater/del",
            data: {"empId":id},
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-edit-type");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    }

    var table;

    $(function () {

        /** 加载用户表格 */
        table = js.table.init({
            url: ctx + "tool/offMater/list",
            showColumns: true,
            showExport: false,
            pageSize:10,
            exportOptions:{
                ignoreColumn: [14,15,16,17,18]
            },
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index, field) {
                        var pageSize = table.bootstrapTable('getOptions').pageSize;
                        var pageNumber = table.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                        // return index + 1;
                    }
                },
                { title: "物资名称", field: 'matName',width:300},
                { title: "资产编号", field: 'matCode',width:300},
                { title: "尺寸", field: 'matSize',width:200},
                { title: "材质", field: 'matType',width:200},
                { title: "品级", field: 'matLevel',width:200},
                { title: "具体位置", field: 'matSpeLoc',width:500},
                { title: "使用部门", field: 'matDepart',width:200},
                { title: "来源", field: 'matSource',width:100},
                { title: "责任人", field: 'matPerson',width:100},
                { title: "使用状态", field: 'matStatus',width:100},
                { title: "关键信息", field: 'matInfo',width:200},
                { title: "备注",field: 'matRemark',width:500},
                { title: "排序", field: 'matSortNum',width:100},
                { title: "创建人", field: 'matCreUser',width:70},
                { title: "创建时间", field: 'matCreDate',width:100},
                { title: "修改人", field: 'matUpdUser',width:70},
                { title: "修改时间", field: 'matUpdDate',width:100},
                {
                    title: "操作",
                    width: '110',
                    formatter: function (value, row, index) {
                        var actions = [];
                    if (hasP("drive:officematsb:edit")){
                        actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="editType(' + js.jsonStringify(row) +')"> 编辑</a> ');
                    }
                    if (hasP("drive:officematsb:del"))
                    {
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delType(' + row.matId + ')"> 删除</a> ');
                    }
                        return actions.join('');
                    }
                }
            ]
        });

        //导出的权限
        if(!hasP("drive:officematsb:edit")){
            $("div[class='export btn-group']").children().remove();
        }
        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });
    });

    /** 下载导入失败excel */
    $("#download-error").click(function () {
        var that = $(this);
        js.post({
            url: ctx + "tool/offMater/exist",
            async: false,
            data: {
                url: that.attr("data-url")
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    that.attr("href", that.attr("data-url") + "?timeStamp=" + new Date().getTime());
                } else {
                    js.modal.warning("没有需要处理的文件");
                }
            }
        });
    });
</script>